<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" :content="name" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <div class="jsbos-common-layout">
        <div class="jsbos-common-layout-center">
          <el-row class="jsbos-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="4">
                <el-form-item label="考试名称">
                  <el-input
                    v-model="query.examId"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="创建用户">
                  <userSelect
                    v-model="query.creatorUserId"
                    placeholder="请选择"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                    >查询</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="reset()"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <div class="jsbos-common-layout-main jsbos-flex-main">
            <div class="jsbos-common-head">
              <div>
                <!--                <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>-->
              </div>
              <div class="jsbos-common-head-right">
                <el-tooltip effect="dark" content="刷新" placement="top">
                  <el-link
                    icon="icon-ym icon-ym-Refresh JSBOS-common-head-icon"
                    :underline="false"
                    @click="reset()"
                  />
                </el-tooltip>
                <screen-full isContainer />
                <el-tooltip effect="dark" content="列设置" placement="top">
                  <el-link
                    icon="icon-ym icon-ym-options jsbos-common-head-icon"
                    :underline="false"
                    @click="() => this.$refs.jsbosTableRef.showDrawer()"
                  />
                </el-tooltip>
              </div>
            </div>
            <jsbos-table
              v-loading="listLoading"
              :data="list"
              ref="jsbosTableRef"
              @sort-change="sortChange"
            >
              <el-table-column
                prop="examId"
                label="考试名称"
                width="0"
                align="left"
              />
              <el-table-column
                prop="paperId"
                label="试卷名称"
                width="0"
                align="left"
              />
              <el-table-column
                prop="startTime"
                label="开始时间"
                width="140"
                align="center"
              />
              <el-table-column
                prop="submitTime"
                label="提交时间"
                width="140"
                align="center"
              />
              <el-table-column
                prop="reviewStatus"
                label="批阅状态"
                width="100"
                align="center"
              >
                <template slot-scope="scope">{{
                  scope.row.reviewStatus | dynamicText(reviewStatusOptions)
                }}</template>
              </el-table-column>
              <el-table-column
                prop="reviewerUserId"
                label="批阅人"
                width="100"
                align="center"
              />
              <el-table-column
                prop="reviewerTime"
                label="批阅时间"
                width="140"
                align="center"
              />
              <el-table-column
                prop="creatorUserId"
                label="创建用户"
                width="100"
                align="center"
              />
              <el-table-column
                prop="creatorTime"
                label="创建时间"
                width="140"
                align="center"
              />
              <el-table-column label="操作" width="100" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="addOrUpdateHandle(scope.row.id)"
                    >批阅</el-button
                  >
                </template>
              </el-table-column>
            </jsbos-table>
            <pagination
              :total="total"
              :page.sync="listQuery.currentPage"
              :limit.sync="listQuery.pageSize"
              @pagination="initData"
            />
          </div>
        </div>
        <!-- <JSBOS-Form v-if="formVisible" ref="JSBOSForm" @refresh="refresh" /> -->
      </div>
      <edit ref="edit2"></edit>
    </div>
  </transition>
</template>

<script>
import request from "@/utils/request";
// import JSBOSForm from "./Form";
import edit from "./edit";
export default {
  name: "TemsExamTask",
  components: { edit },
  data() {
    return {
      detailVisible: false,
      name: "",
      examId: "",
      query: {
        examId: undefined,
        creatorUserId: undefined,
      },
      treeProps: {
        children: "children",
        label: "fullName",
        value: "id",
      },
      list: [],
      listLoading: true,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,
      exportBoxVisible: false,
      columnList: [
        { prop: "examId", label: "考试名称" },
        { prop: "startTime", label: "开始时间" },
        { prop: "submitTime", label: "提交时间" },
        { prop: "creatorUserId", label: "创建用户" },
        { prop: "creatorTime", label: "创建时间" },
        { prop: "questionReviewStatus", label: "批阅状态" },
        { prop: "reviewerUserId", label: "批阅人" },
        { prop: "reviewerTime", label: "批阅时间" },
        { prop: "paperId", label: "试卷名称" },
      ],
      submitTypeOptions: [
        { fullName: "手动交卷", id: "1" },
        { fullName: "自动交卷", id: "2" },
      ],
      submitTypeProps: {
        label: "fullName",
        value: "id",
      },
      reviewStatusOptions: [
        { fullName: "待批阅", id: "0" },
        { fullName: "已批阅", id: "1" },
      ],
    };
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    },
  },
  created() {},
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    initParam(examId, name) {
      this.examId = examId;
      this.name = name;
      this.initData();
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        examId: this.examId,
        menuId: this.menuId,
      };
      request({
        url: `/api/exam/TemsExamTask/getReviewList`,
        method: "post",
        data: _query,
      }).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.list = _list;
        this.total = res.data.pagination.total;

        this.listLoading = false;
      });
    },
    addOrUpdateHandle(id, isDetail) {
      this.formVisible = true;
      console.log(" this.$refs", this.$refs.edit2);
      this.$nextTick(() => {
        this.$refs.edit2.init([], id);
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.search();
    },
  },
};
</script>
